<template>
  <div class="app-container home" >
    <center>
      <span></span>
      <el-form :inline="true" @submit.native.prevent   :model="formInline" class="demo-form-inline">
        <el-form-item  label="我是智能房管家" >
          <el-input v-model="info" :style="{width: inputWid(info)}"   clearable @keyup.enter.native="searchAllCompany"  placeholder="请输入问题"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"  @click="init" >发送</el-button>
        </el-form-item>
      </el-form>

      <div style=" width: 1000px;  background-color: #2b2f3a; color: cornsilk;white-space: break-spaces; word-break: break-all;overflow: auto;">
        <h1 style="" v-if="this.aaa!=''">{{aaa}}</h1>
      </div>
    </center>


  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      formInline: {},
      // 版本号
      version: "3.6.2",
      info:"",
      aaa:''
    };
  },
  methods: {
    searchAllCompany(){
       this.init();
    },
    async init() {
      this.aaa='';
      const {Configuration, OpenAIApi} = require("openai");
      const configuration = new Configuration({
        apiKey: "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"
      });
      const openai = new OpenAIApi(configuration);
      const response = await openai.createCompletion({
        model: "text-davinci-003",
        prompt: this.info,
        temperature: 0.9,
        max_tokens: 1000,
        top_p: 0,
        frequency_penalty: 0.5,
        presence_penalty: 0,
        stop: ["Human","AI"],
      });
      /**
      // const { Configuration, OpenAIApi } = require("openai");
      //
      // const configuration = new Configuration({
      //   apiKey: process.env.OPENAI_API_KEY,
      // });
      // const openai = new OpenAIApi(configuration);
      //
      // const response = await openai.createCompletion({
      //   model: "text-davinci-003",
      //   prompt: "I am a highly intelligent question answering bot. If you ask me a question that is rooted in truth, I will give you the answer. If you ask me a question that is nonsense, trickery, or has no clear answer, I will respond with \"Unknown\".\n\nQ: What is human life expectancy in the United States?\nA: Human life expectancy in the United States is 78 years.\n\nQ: Who was president of the United States in 1955?\nA: Dwight D. Eisenhower was president of the United States in 1955.\n\nQ: Which party did he belong to?\nA: He belonged to the Republican Party.\n\nQ: What is the square root of banana?\nA: Unknown\n\nQ: How does a telescope work?\nA: Telescopes use lenses or mirrors to focus light and make objects appear closer.\n\nQ: Where were the 1992 Olympics held?\nA: The 1992 Olympics were held in Barcelona, Spain.\n\nQ: How many squigs are in a bonk?\nA: Unknown\n\nQ: Where is the Valley of Kings?\nA:",
      //   temperature: 0,
      //   max_tokens: 100,
      //   top_p: 1,
      //   frequency_penalty: 0.0,
      //   presence_penalty: 0.0,
      //   stop: ["\n"],
      // });*/
      console.log(response)
      this.aaa= response.data.choices[0].text
    }
  },computed: {
    inputWid() {
      return function (value) {
        if (!value || (value.length <= 20)) {
          return '330px'
        } else {
          // 有内容，字符串长度*字体大小
          return (String(value).length * 13 + 70) + 'px'
        }
      }
    }
  }

};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>

